<template>
    <div>
        <ayjTable ref="tableRef" :columns="columns" :data="count_ls" :hasMore="hasMore" :loading="loading"
            :height="dynamicHeight" @load-more="loadMoreData" @scroll="handleTableScroll">
            <template v-if="reqShopCount.group == 2 || reqShopCount.group == 3" #column-time="{ row }">
                <span class="font_bule under-line" @click="itemClick(row)"> {{ row.time || '--' }} </span>
            </template>
            <template v-else #column-timestr="{ row }">
                <span class="font_bule under-line" @click="itemClick(row)"> {{ row.timestr || '--' }} </span>
            </template>
            <template #column-profit_re="{ row }">
                <span class="font_green"> {{ row.profit_re || 0 }} </span>
            </template>
        </ayjTable>

        <!-- 左侧弹窗 一级 季 月 -->
        <SalesRevenueDrawer ref="salesRevenueDrawerRef" />
        <!-- 日销售情况 -->
        <ShopSellLsDrawer ref="shopSellLsDrawerRef" />
    </div>
</template>

<script setup>
import { ref, onMounted, defineProps, computed, watch, nextTick, onUnmounted, getCurrentInstance } from '@vue/composition-api'
import { useSaleState } from '@/components/report/hooks/useSaleState'
import SalesRevenueDrawer from '@/components/report/saleV3/SalesRevenueDrawer.vue'
import ShopSellLsDrawer from '@/components/report/saleV3/ShopSellLsDrawer.vue'

const { proxy } = getCurrentInstance()

const props = defineProps({
    dynamicHeight: {
        type: Number,
        default: 0
    }
})

const tableRef = ref(null)
const visibleData = ref([])

// 使用销售状态
const {
    reqShopCount,
    count_ls,
    loading,
    hasMore,
    loadMoreData,
    handleItemClick,
    handleShopSellLsClick,
    stime_type,
    is_quarter
} = useSaleState()

const salesRevenueDrawerRef = ref(null)
const shopSellLsDrawerRef = ref(null)
const itemClick = (item) => {
    // 非必须 报表类型 【1日报 2月报 3季报  5自定义时间的日报】
    // >>>>> 2月报 3季报 日销售情况
    if (reqShopCount.value.group == 2 || reqShopCount.value.group == 3) {
        if (reqShopCount.value.group == 3) {
            is_quarter.value = reqShopCount.value.group
        }
        salesRevenueDrawerRef.value.open()
        handleItemClick(item)
    } else {
    // >>>>> 1日报 日销售情况
        shopSellLsDrawerRef.value.open()
        handleShopSellLsClick(item)
    }
    if (reqShopCount.value.group == 1 || reqShopCount.value.group == 2) {
        stime_type.value = reqShopCount.value.group
    }
}

const columns = computed(() => [
    {
        title: '序号',
        prop: 'index',
        width: '50px',
        align: 'center',
        render: (row, column, index) => index + 1,
    },
    { title: '日期', prop: (reqShopCount.value.group == 2 || reqShopCount.value.group == 3) ? 'time' : 'timestr', slot: true },
    { title: '销售额', prop: 'amount_re', align: 'center' },
    { title: '毛利', prop: 'profit_re', align: 'center', slot: true },
    { title: '单数', prop: 'num_od_re', align: 'center' },
    { title: '数量', prop: 'number_re', align: 'center' },
])

// 处理表格滚动，获取可视区域数据
const handleTableScroll = () => {
    if (!tableRef.value) return

    const bodyWrapper = tableRef.value.$el.querySelector('.table-body-wrapper')
    if (!bodyWrapper) return

    const scrollTop = bodyWrapper.scrollTop
    const clientHeight = bodyWrapper.clientHeight
    const headerHeight = 40 // 表头高度
    const rowHeight = 32 // 每行高度(包含边框)

    // 计算可视区域的起始和结束索引
    const startIndex = Math.max(0, Math.floor(scrollTop / rowHeight))
    const visibleRows = Math.ceil((clientHeight - headerHeight) / rowHeight)

    const endIndex = Math.min(
        startIndex + visibleRows + 1, // 加1以确保滚动时不会出现空白
        count_ls.value.length
    )
    // 更新可视区域数据，确保包含当前可视区域的数据
    visibleData.value = count_ls.value.slice(startIndex, endIndex)
}

// 监听数据变化时更新可视区域数据
watch(() => count_ls.value, () => {
    // 确保DOM已经更新
    nextTick(() => {
        handleTableScroll()
    })
}, { immediate: true, deep: true }) // 添加 deep: true 以深度监听数组变化

// 监听滚动事件
onMounted(() => {
    const bodyWrapper = tableRef.value?.$el.querySelector('.table-body-wrapper')
    if (bodyWrapper) {
        bodyWrapper.addEventListener('scroll', handleTableScroll)
    }
    // 确保DOM已经更新
    nextTick(() => {
        handleTableScroll()
    })
})

// 组件卸载时移除事件监听
onUnmounted(() => {
    const bodyWrapper = tableRef.value?.$el.querySelector('.table-body-wrapper')
    if (bodyWrapper) {
        bodyWrapper.removeEventListener('scroll', handleTableScroll)
    }
})

// 暴露可视区域数据给父组件
defineExpose({
    visibleData
})
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
    padding: 10px 0 !important;
}

.customer_points_top {
    padding: 10px;
    border-radius: 6px;
}

.select_store ::v-deep .el-input__inner {
    background-color: #f5f5f5 !important;
    border: none !important;
    color: #333 !important;
    padding-left: 4px !important;
    text-align: left !important;
    // border-bottom: 1px solid #e9dede !important;
    border-radius: 0 !important;
}

.customer_points_top ::v-deep .el-divider--vertical {
    height: 1.5rem !important;
    position: relative;
    left: -10px;
}

.container_box {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.table_box {
    flex: 1;
}
</style>
